import React from 'react'
import useGetComponentInfo from '../../hooks/useGetComponentInfo'
import { ComponentPropsType, getComponentConfByType } from '../../components/QuestionComponents'
import { Empty, Flex } from 'antd'

import { useDispatch } from 'react-redux'
import { updateComponentProps } from '../../store/componentsReducer'

function NoProp() {
  return (
    <Flex justify="center">
      <Empty description="未选择组件" />
    </Flex>
  )
}

export default function PropComponentLib() {
  const dispatch = useDispatch()
  const { selectedComponent } = useGetComponentInfo()
  if (!selectedComponent) return <NoProp />

  const { _id, type, props, isLock } = selectedComponent
  // 根据type获取这个组件对应的配置组件
  const componentConf = getComponentConfByType(type)
  if (!componentConf) return <NoProp />

  function chagneComponentProps(newProps: ComponentPropsType) {
    dispatch(
      updateComponentProps({
        _id,
        newProps
      })
    )
  }

  const { PropComponent } = componentConf

  return (
    <div style={{ paddingBottom: '30px' }}>
      <PropComponent {...props} onChange={chagneComponentProps} disabled={isLock} />
    </div>
  )
}
